@charset "utf-8";
.mj-notification{
    display: flex;
    background-color:#fff;
    color :#515a6e;
    padding:15px;
    position:fixed;
    width:335px;
    box-shadow:0 1px 6px rgb(0 0 0 / 20%);
    border-radius:4px;
    transition: all .3s;
    animation: slideRightIn .3s;
}
.mj-notification-icon {
	display: inline-block;
	font-style:normal;
	line-height:normal;
	margin-right:15px;
}
.mj-notification-icon:after {
	font-family: icon;
	font-size:32px;
}
.mj-notification-icon.success:after {
	content:"\e810";
	color:var(--success);
}

.mj-notification-icon.error:after {
	content:"\e64c";
	color:var(--error);
}

.mj-notification-icon.info:after {
	content:"\e68c";
	color:var(--info);
}

.mj-notification-icon.warning:after {
	content:"\e72d";
	color:var(--warning);
}



.mj-notification-content {

}

.mj-notification-title {
    font-size: 16px;
    line-height: 19px;
    color: #17233d;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
}
.mj-notification-desc {
    font-size: 14px;
    color: #515a6e;
    text-align: justify;
    line-height: 1.5;
}

.mj-notification-close {
	position: absolute;
	top:10px;
	right:10px;
    cursor: pointer;
}
.mj-notification-close:after {
	content: "\e967";
	font-family:icon;
	font-size: 22px;
	color:#909399;
}

@keyframes slideRightIn {
	0% {
		opacity: 0;
		transform:translateX(100%);
	}
	100% {
		opacity:1;
		transform:translateX(0);
	}
}

